<template>
  <div>
    <div v-if="!DoctorStatus">
      <el-row>
        <el-col :span="8" >
          <h4 style="margin:0">
            <span>医生列表</span>
          </h4>
        </el-col>
        <el-col :span="16" style="text-align:right">
          <el-input  v-model="sheachValue" style="width:300px" placeholder="搜索医生/医院"></el-input>
            <el-button type="primary" @click="seachFun">搜索</el-button>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <doc-list v-if="navStatus == -1" ref="refData" :navStatus="navStatus" @addUserFun="addUserFun"></doc-list>
        </el-tab-pane>

        <el-tab-pane label="待审核" name="second">
          <doc-list v-if="navStatus == 0" ref="refData" :navStatus="navStatus" @addUserFun="addUserFun"></doc-list>
        </el-tab-pane>

        <el-tab-pane label="已审核" name="third">
          <doc-list v-if="navStatus == 1" ref="refData" :navStatus="navStatus" @addUserFun="addUserFun"></doc-list>
        </el-tab-pane>
      </el-tabs>
      
    </div>
    <div v-if="DoctorStatus">
      <Add-Doctor @colseFun="colseFun" :doctData='doctData'></Add-Doctor>
    </div>
  </div>
</template>

<script>
  import AddDoctor from './DoctorItem/AddDoctor'
  import DocList from './DoctorItem/DocList'
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  export default {
    data() {
      return {
        activeName: 'first',
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        DoctorStatus:false,
        value:'关注',
        dataPush:'',
        doctData:'',
        navStatus:-1,
        
        sheachValue:'',
      }
    },
    components:{
      AddDoctor,
      DocList
    },
    
     mounted() {
      var obj = document.getElementById('centerbox')
      obj.addEventListener('scroll', this.handleScroll,true)
    },
    destroyed(){
      var obj = document.getElementById('centerbox')
      obj.removeEventListener('scroll', this.handleScroll,true)
    },
    methods: {
      handleScroll() {
        var scollobj = document.getElementById('centerbox');
        var scrollTop = scollobj.scrollTop;
        const obj = document.getElementById('tab-first');
        const myobj = obj.parentNode.parentNode;
        if(scrollTop> 32){
          myobj.style.position = 'fixed';
          myobj.style.top = 0;
        } else {
          myobj.style.position = 'relative';
        }
      },
      
      handleClick(tab, event){
        this.navStatus = Number(tab.index) -1;
        
      },
      //添加用户
      addUserFun(row) {
        this.doctData = row;
        this.DoctorStatus = true
      },
      colseFun(){
        this.DoctorStatus = false
      },
      seachFun(){
        this.getlist()
      },
      editStatus(id,status) {
        let txt;
        status == 1 ? txt = '启用' : txt = '禁用';
        this.$confirm(`确认 ${txt} 改医生吗？`)
        .then(_ => {
          const obj ={
            "status":status,
            "id":id
          };

          Http.AuditDoctor(obj)
          .then( res => {
            if (res.data.code == 200) {
              this.getlist()
              this.$message.success('提交成功')
            } else if(res.data.code == -1003) {
              this.$message.error(`请求失败原因：${res.data.message}`)
              this.$router.push('/')
            } else {
              this.$message.error('提交失败')}
          })
          .catch( error => {
            this.$message.error('服务器请求失败')
          })
        })
        .catch(_ => {
          //取消部分
          
        });
      },
     
      
    }
  }
</script>
<style  scoped>
.box{
  border-bottom:1px solid red;
}
    .test{
        border:1px solid #ccc;
    }
    .drag-item{
        width: 200px;
        height: 50px;
        line-height: 50px;
        margin: auto;
        position: relative;
        
        background: #ddd;
        margin:20px 5px;
    }
    .ghostClass{
        opacity: 1;
    }
    .bottom{
        width: 200px;
        height: 50px;
        position: relative;
        background: blue;
        top:2px;
        left: 2px;
        transition: all .5s linear;
    }
</style>
